<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人作品集 - Bootstrap练习</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 自定义样式 */
        :root {
            --primary: #6c63ff;
            --dark: #2f2e41;
            --light: #f8f9fa;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .navbar {
            background-color: var(--dark);
        }

        .hero-section {
            background-color: var(--dark);
            color: white;
            padding: 100px 0;
        }

        .section-title {
            position: relative;
            display: inline-block;
            margin-bottom: 30px;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background-color: var(--primary);
        }

        .skill-progress {
            height: 10px;
            border-radius: 5px;
        }

        .portfolio-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .portfolio-item:hover {
            transform: translateY(-10px);
        }

        .portfolio-img {
            transition: transform 0.5s;
        }

        .portfolio-item:hover .portfolio-img {
            transform: scale(1.1);
        }

        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(108, 99, 255, 0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
            color: white;
        }

        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }

        footer {
            background-color: var(--dark);
            color: white;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="fas fa-user-circle me-2"></i>我的作品集
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#home">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">关于我</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#skills">技能</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#portfolio">作品集</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">联系我</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 首页 -->
<section id="home" class="hero-section">
    <div class="container text-center">
        <img src="./img/4.png" width="150px" class="rounded-circle mb-4" alt="头像">
        <h1 class="display-4 fw-bold">我是张三</h1>
        <p class="lead">前端开发工程师 & UI设计师</p>
        <div class="mt-4">
            <a href="#portfolio" class="btn btn-primary btn-lg me-2">查看作品</a>
            <a href="#contact" class="btn btn-outline-light btn-lg">联系我</a>
        </div>
    </div>
</section>

<!-- 关于我 -->
<section id="about" class="py-5">
    <div class="container">
        <h2 class="text-center section-title">关于我</h2>
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h3>个人简介</h3>
                <p>我是一名有3年经验的前端开发工程师，专注于创建美观、响应迅速的用户界面。我热爱将设计转化为代码，并不断学习新技术来提升我的技能。</p>
                <p>毕业于XX大学计算机科学专业，曾在多家科技公司实习和工作，积累了丰富的项目经验。</p>
                <div class="row mt-4">
                    <div class="col-sm-6">
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> HTML5/CSS3</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> JavaScript</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Bootstrap</li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> React</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Vue.js</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> UI/UX设计</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mt-4 mt-lg-0">
                <img src="./img/5.png" width="600px" class="img-fluid rounded" alt="工作照片">
            </div>
        </div>
    </div>
</section>

<!-- 技能 -->
<section id="skills" class="py-5 bg-light">
    <div class="container">
        <h2 class="text-center section-title">我的技能</h2>
        <div class="row g-4">
            <div class="col-md-6">
                <div class="p-4 bg-white rounded shadow-sm">
                    <h4 class="mb-4">技术技能</h4>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>HTML5/CSS3</span>
                            <span>95%</span>
                        </div>
                        <div class="progress skill-progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 95%"></div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>JavaScript</span>
                            <span>85%</span>
                        </div>
                        <div class="progress skill-progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 85%"></div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Bootstrap</span>
                            <span>90%</span>
                        </div>
                        <div class="progress skill-progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 90%"></div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>React</span>
                            <span>80%</span>
                        </div>
                        <div class="progress skill-progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 80%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="p-4 bg-white rounded shadow-sm">
                    <h4 class="mb-4">设计技能</h4>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>UI/UX设计</span>
                            <span>75%</span>
                        </div>
                        <div class="progress skill-progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 75%"></div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Photoshop</span>
                            <span>70%</span>
                        </div>
                        <div class="progress skill-progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 70%"></div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Figma</span>
                            <span>85%</span>
                        </div>
                        <div class="progress skill-progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 85%"></div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Adobe XD</span>
                            <span>65%</span>
                        </div>
                        <div class="progress skill-progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 65%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 作品集 -->
<section id="portfolio" class="py-5">
    <div class="container">
        <h2 class="text-center section-title">我的作品</h2>
        <div class="text-center mb-5">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-primary active">全部</button>
                <button type="button" class="btn btn-outline-primary">网页设计</button>
                <button type="button" class="btn btn-outline-primary">移动应用</button>
                <button type="button" class="btn btn-outline-primary">UI/UX</button>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-4 col-md-6">
                <div class="portfolio-item">
                    <img src="./img/7.png?text=项目1" class="img-fluid portfolio-img" alt="项目1">
                    <div class="portfolio-overlay">
                        <h4>企业网站设计</h4>
                        <p>响应式企业官网</p>
                        <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#project1">查看详情</button>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="portfolio-item">
                    <img src="./img/8.png?text=项目2" class="img-fluid portfolio-img" alt="项目2">
                    <div class="portfolio-overlay">
                        <h4>电商平台</h4>
                        <p>B2C电商网站</p>
                        <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#project2">查看详情</button>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="portfolio-item">
                    <img src="./img/9.png?text=项目3" class="img-fluid portfolio-img" alt="项目3">
                    <div class="portfolio-overlay">
                        <h4>移动应用UI</h4>
                        <p>健康管理APP</p>
                        <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#project3">查看详情</button>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="portfolio-item">
                    <img src="./img/10.png?text=项目4" class="img-fluid portfolio-img" alt="项目4">
                    <div class="portfolio-overlay">
                        <h4>后台管理系统</h4>
                        <p>企业数据管理</p>
                        <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#project4">查看详情</button>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="portfolio-item">
                    <img src="./img/11.png?text=项目5" class="img-fluid portfolio-img" alt="项目5">
                    <div class="portfolio-overlay">
                        <h4>个人博客</h4>
                        <p>技术分享平台</p>
                        <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#project5">查看详情</button>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="portfolio-item">
                    <img src="./img/12.png?text=项目6" class="img-fluid portfolio-img" alt="项目6">
                    <div class="portfolio-overlay">
                        <h4>在线教育平台</h4>
                        <p>课程学习系统</p>
                        <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#project6">查看详情</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 项目模态框 -->
<div class="modal fade" id="project1" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">企业网站设计</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <img src="https://via.placeholder.com/800x500?text=项目1详情" class="img-fluid mb-3" alt="项目1详情">
                <p>这是一个响应式企业官网项目，使用HTML5、CSS3、JavaScript和Bootstrap框架开发。网站包含首页、关于我们、产品展示、新闻动态和联系我们等主要页面。</p>
                <p>项目特点：</p>
                <ul>
                    <li>完全响应式设计，适配各种设备</li>
                    <li>优化SEO，提高搜索引擎排名</li>
                    <li>集成联系表单和在线客服功能</li>
                    <li>后台内容管理系统方便客户自行更新</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <a href="#" class="btn btn-primary">访问网站</a>
            </div>
        </div>
    </div>
</div>

<!-- 其他项目模态框结构类似，省略... -->

<!-- 联系我 -->
<section id="contact" class="py-5 bg-light">
    <div class="container">
        <h2 class="text-center section-title">联系我</h2>
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-body p-5">
                        <form>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="name" class="form-label">姓名</label>
                                    <input type="text" class="form-control" id="name" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="email" class="form-label">邮箱</label>
                                    <input type="email" class="form-control" id="email" required>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="subject" class="form-label">主题</label>
                                <input type="text" class="form-control" id="subject" required>
                            </div>
                            <div class="mb-3">
                                <label for="message" class="form-label">留言内容</label>
                                <textarea class="form-control" id="message" rows="5" required></textarea>
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary btn-lg">发送消息</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer class="py-4">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6 text-center text-md-start">
                <p class="mb-0">© 2023 张三. 保留所有权利.</p>
            </div>
            <div class="col-md-6 text-center text-md-end">
                <a href="#" class="text-white me-3"><i class="fab fa-weixin fa-lg"></i></a>
                <a href="#" class="text-white me-3"><i class="fab fa-weibo fa-lg"></i></a>
                <a href="#" class="text-white me-3"><i class="fab fa-github fa-lg"></i></a>
                <a href="#" class="text-white me-3"><i class="fab fa-linkedin fa-lg"></i></a>
            </div>
        </div>
    </div>
</footer>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>